<template>
  <div class="container" tyle="min-height: 2000px;">
    <!-- 轮播图 -->
    <div :class="['bg' ,types==1? 'bg1':'bg2']">
      <div>
        <div class="title">{{types==1?'3D智慧运维系统':'实验室智慧管理系统'}}</div>
        <div class="dec">行为公正，数据准确，持续改进，优质服务</div>
      </div>
    </div>

    <!-- 系统模块 -->
    <div class="moduel">
       <div class="title">
        {{types==1?'3D智能运维系统':'实验室智慧管理系统'}}
        <div class="line"></div>
      </div>
       <div class="body">
        <template  v-if="types==1">
          <div class="function-area" v-for="item in type1" :key="item.id" @click="toSubSystem(item.id)">
          <img :src="item.url" alt="">
          <span>{{item.name}} </span>
        </div>
        </template>
        <template v-else-if="types==2">
          <div class="function-area" v-for="item in type2" :key="item.name">
          <img :src="item.url" alt="">
          <span>{{item.name}}</span>
        </div>
        </template>

       </div>
    </div>

  </div>
</template>

<script>
import { changeMenus } from '@/router/changemenu.js'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      type1: [
        {
          id:0,
          name: '实时监控门户',
          url: require('../../../assets/images/3d_module1.png'),
        },
        {
          id:6,
          name: '仓库管理系统',
          url: require('../../../assets/images/3d_module2.png'),
        },
        {
          id:1,
          name: '新风排风控制系统',
          url: require('../../../assets/images/3d_module3.png'),
        },
        {
          id:2,
          name: '实验室环境管理系统',
          url: require('../../../assets/images/3d_module4.png'),
        },
        {
          id:3,
          name: '特殊气体报警系统',
          url: require('../../../assets/images/3d_module5.png'),
        },
        {
          id:4,
          name: '实验室出入管理系统',
          url: require('../../../assets/images/3d_module6.png'),
        },
        {
          id:5,
          name: '实验室安全监控系统',
          url: require('../../../assets/images/3d_module7.png'),
        },
        {
          id:7,
          name: '实验废气排放监测系统',
          url: require('../../../assets/images/3d_module8.png'),
        },
        {
          id:8,
          name: '集中总控系统智能化信息平台',
          url: require('../../../assets/images/3d_module9.png'),
        },
        {
          id:9,
          name: '实验冷链管理系统',
          url: require('../../../assets/images/3d_module10.png'),
        }
      ],
      type2: [
        {
          name: '仓库管理系统',
          url: require('../../../assets/images/3d_module2.png'),
        },
        {
          name: '人员管理',
          url: require('../../../assets/images/lims_module1.png'),
        },
        {
          name: '人员培训',
          url: require('../../../assets/images/lims_module2.png'),
        },
        {
          name: '设备和设施管理',
          url: require('../../../assets/images/lims_module3.png'),
        },
        {
          name: '合同管理',
          url: require('../../../assets/images/lims_module4.png'),
        },
        {
          name: '样本管理',
          url: require('../../../assets/images/lims_module5.png'),
        },
        {
          name: '投诉管理',
          url: require('../../../assets/images/lims_module6.png'),
        },
        {
          name: '报告管理',
          url: require('../../../assets/images/lims_module7.png'),
        },
        {
          name: '风险评估',
          url: require('../../../assets/images/3d_module9.png'),
        }
      ],
      types:1,
    };
  },

  created() {
    this.types = localStorage.getItem("home-info-type");
    //1 3D系统

    //2 limis系统

  },
  methods: {
    async toSubSystem(id){
      if(id==0) {
        // hanjiangweb
        return window.open('http://192.168.22.78:8889/index.html', '_blank')
        // hanjiangweb-ys
        // return window.open('http://10.6.57.198:9001/index.html', '_blank')
      }
      const sub = this.$store.state.app.systemList.find(item => item.id == id)
      if (getToken()) {
        this.$store.dispatch('app/changeSubSystem', sub)
        this.$store.commit('tagsView/visitedViewsDel')
        await changeMenus(id)
        if(this.$store.state.permission.addRouters[0].children){
          let path = this.$store.state.permission.addRouters[0].path+'/'+this.$store.state.permission.addRouters[0].children[0].path
           this.$router.push(path)
        }else {
          this.$message.error('您没有该系统进入权限')
        }
    }
  },
}
}
</script>

<style scoped lang="scss">
.container {
  min-height: 2000px;
}
.bg1{
  background: url('../../../assets/images/hj3d.jpg') no-repeat center;
}
.bg2{
  background: url('../../../assets/images/hjlims.jpg') no-repeat center;
}
.bg {
  position: relative;
  height: 730px;
  background-size: cover;
  color: #fff;
  >div {
  position: absolute;
  bottom: 255px;
  left: 140px;
  .title {
    font-size: 80px;
    font-weight: 700;
    margin-bottom: 35px;
  }
  .dec {
    font-size: 26px;
  }
  }
}
.function-area{
  transition: transform .5s ease-in-out;
 }
.function-area:hover {
    transform: translate(0, -15px);
    transition: transform .5s ease-in-out;
    box-shadow: 0 10px 20px 1px rgba(49, 49, 49, 0.2);
    border: 1px solid #FFFFFF;
  }
.moduel {
  // height: 572px;
  .title {
    position: relative;
    height: 220px;
    line-height: 220px;
    text-align: center;
    font-size: 35px;
    font-weight: 700;
     .line{
      position: absolute;
      bottom: 55px;
      left: 48%;
      width: 94px;
      height: 5px;
      background-color: #074489;
    }
  }
  .body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 15%;
    >div {
      transition: transform .5s ease-in-out;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 17%;
      height: 183px;
      border-radius: 13px;
      box-shadow: 2px 1px 10px 0px rgba(0,0,0,.3);
      margin: 0 10% 70px 0;
      padding: 0 13px;
      &:nth-child(4n) {
        margin-right: 0;
      }
      img {
        width: 30%;
        height: 33%;
        margin-bottom: 26px;
      }
       span {
        font-size: 22px;
        text-align: center;
       }
    }
  }
}

.info {

  height: 604px;
  background-color: #E1E8EE;
   .title {
    height: 170px;
    line-height: 170px;
    text-align: center;
     font-size: 30px;
     font-weight: 700;
   }
   .body{
display: flex;
  justify-content: center;
  align-items: center;

  .left {
    width: 431px;
    height: 347px;
    border: 2px dashed #ccc;
    border-radius: 11px;
    background: url('../../../assets/images/infobg.png') no-repeat center;
    background-size: cover;
    margin-right: 50px;
  }
  .right {
    width: 600px;
    height: 347px;
     border-radius: 13px;
    background-color: #fff;
  }
   }
}

.rules {
  height: 768px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
        height: 150px;
        line-height: 150px;
        text-align: center;
         font-size: 30px;
         font-weight: 700;
      }
  .first {
    border-radius: 18px;
    padding: 35px;
     width: 800px;
     height: 216px;
     background-color: #F9F9F9;
     box-shadow: 0px 0px 6px 0px rgba(0,0,0,.3);
    .name {
      font-size: 23px;
      font-weight: 700;
    }
  }
  .more {
    border-radius: 13px;
    width: 630px;
    height: 336px;
   box-shadow: 0px 0px 6px 0px rgba(0,0,0,.3);
  }
}

.link {
  height: 377px;
  background-color: #E1E8EE;
  .title {
    height: 146px;
    font-weight: 700;
    font-size: 30px;
    line-height: 146px;
    text-align: center;
  }
  .content {
    margin: 0 auto;
    width: 780px;
    height: 160px;
    background-color: #fff;
    border-radius: 13px;
  }
}
</style>
